import React from 'react';
import { observer } from 'mobx-react';
import { Dropdown,Menu,Icon } from 'antd';
import window from '../../util';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import ReplyItemDetail, { ReplyItemDetailProps } from './reply-item-detail';

export interface ReplyItemProps {
  item: {
    id: string,
    img_path: string,
    replycontent: string,
    replydate: string;
    replytime: string;
    floornum: string;
    replyorname: string;
    replyor: string;
    quotes: ReplyItemDetailProps,
    comments: ReplyItemDetailProps[],
    likeList: any[];
    showEdit: boolean;
    showDelete: boolean;
    aleradyLiked: boolean;
    replyorDept: string;
    replyorDeptName: string;
    ismy: any;

  };
  edit: (e) => void;
  delete: (e) => void;
  like: (e) => void;
  unlike: (e) => void;
  reference: (data) => void;
  about: (data) => void;
  isLast: boolean;
}

@observer
export default class RightReplyItem extends React.Component<ReplyItemProps, any> {


  handleMenuClick=(key)=> {
    const {aleradyLiked} = this.props.item;
      if(key=="1"){
        this.onEdit();
      }else if(key=="2"){
        this.onDelete();
      }else if(key=="3"){
        this.onReference();
      }else if(key=="4"){
        this.onAbout();
      }else if(key=="5"){
          if(aleradyLiked){
            this.onUnlike();
          }else{
            this.onLike();
          }
      }
  }

  
  getMenu=()=>{
    const {showEdit,showDelete,aleradyLiked,likeList = []} = this.props.item;
    const menu = (
      <Menu onClick={({ key }) => { this.handleMenuClick(key) }} >
        {showEdit &&
          <Menu.Item key="1">
            <span><Icon type="edit" /> {getLabel(93, '编辑')}</span>
          </Menu.Item>
        }
        {showDelete &&
          <Menu.Item key="2">
              <span><Icon type="delete" /> {getLabel(91, '删除')}</span>
          </Menu.Item>
        }
        <Menu.Item key="3">
          <span><Icon type="copy" /> {getLabel(19422, '引用')}</span>
        </Menu.Item>
        <Menu.Item key="4">
          <span><Icon type="file-text" /> {getLabel(675, '评论')}</span>
        </Menu.Item>
        <Menu.Item key="5">
          {aleradyLiked ?
            <span  style={{color: '#2db7f5'}} title={getLabel(387404, '取消点赞')}><i className="icon-mode-favour" />  {`(${likeList.length})`}</span>
            :
            <span title={getLabel(384393, '点赞')}><i className="icon-mode-zan" />  {`(${likeList.length})`}</span>
          }
        </Menu.Item>
      </Menu>
    );
    return menu;
  }
  render() {
    const {
      img_path, replycontent, replydate, replytime, floornum,
      replyor, replyorname, replyorDept, replyorDeptName, ismy
      ,quotes,likeList=[],comments=[]
    } = this.props.item;
    const dpurl = `/hrm/company/HrmDepartmentDsp.jsp?id=${replyorDept}`;

    let showmore;
    let likeObj = '';
    if (likeList.length > 0) {
      for (let i = 0; i < (likeList.length > 3 ? 3 : likeList.length); i++) {
        let obj = likeList[i];
        likeObj += (i == 0 ? '' : ',') + obj.name;
      }
      showmore = (likeList.length > 3? ' ... ' + getLabel(126387, '等') + likeList.length + getLabel(127, '人') : ' ') + getLabel(383772, '觉得赞') + '！';
    }
    let css1 = ismy == "1"?"cube-reply-my":"cube-reply-others";
    let css2 = ismy == "1"?" ant-popover-placement-leftTop":" ant-popover-placement-rightTop";

    return (
      <div className="cube-reply-list">
          <div className={css1}>
            <div className="content-img">
              <img src={img_path} className="content-text-left-user-img" />
            </div>
            <div className="content-text">
              <div className={"ant-popover"+css2}>
                <div className="ant-popover-content">
                  <div className="ant-popover-arrow"></div>
                  <div className="ant-popover-inner"><div>
                    <div className="ant-popover-title">
                      <span>
                        <span style={{ padding: "0 5px 0 0" }}>{`#` + floornum}</span>
                        <a title={getLabel('131681', "发表于") + ":" + `${replydate} ${replytime}`} style={{ paddingRight: 10 }} href={`javaScript:openhrm(${replyor})`}
                          onClick={event => window.pointerXY(event)}>{replyorname}</a>
                        <a href={dpurl} target="_blank" style={{ whiteSpace: 'pre-wrap' }}>{replyorDeptName}</a>
                      </span>
                      <div className="reply-menu">
                        <Dropdown overlay={this.getMenu()}>
                          <div className="reply-menu-icon"><i className="icon-coms-more" /></div>
                        </Dropdown>
                      </div>
                    </div>
                    <div className="ant-popover-inner-content">
                      <ReplyItemDetail quotes={quotes} showType={2}/>
                      <div className="content-right-remark-html" style={{ minHeight: 24 }}
                        dangerouslySetInnerHTML={{ __html: `<div class="wea-cube-ckeditor-content">${replycontent}</div>` }} />
                        {likeList.length > 0 && <div className='replyLikeDesc'>
                          <Icon type="heart-o"/>&nbsp;{likeObj}
                          {showmore}
                        </div>}
                        {comments.length>0&&
                          <div className={"replyComments"}>
                            <ReplyItemDetail comments={comments}/>
                          </div>
                        }
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>
            {ismy == "1"?
              <div className="clear"></div>
              :
              <div></div>
            }
          </div>
      </div>
    )
  }

  onAbout = () => {
    this.props.about(this.props.item);
  }
  onReference = () => {
    this.props.reference(this.props.item);
  }
  onEdit = () => {
    this.props.edit(this.props.item);
  }
  onDelete = () => {
    this.props.delete(this.props.item);
  }
  onLike = () => {
    this.props.like(this.props.item);
  }
  onUnlike = () => {
    this.props.unlike(this.props.item);
  }

}
